<template>
	<view class="modal-content">
		<view class="row-two">
			<view class="form-item">
				<label>客户名:</label>
				<input v-model="formData.customerName" @blur="searchCutomer" />
			</view>
			<view class="form-item">
				<label>时间:</label>
				<picker v-model="formData.eventTime" mode="date" :value="formData.eventTime" @change="bindDateChange">
					<view class="uni-input">{{formData.eventTime}}</view>
				</picker>
			</view>
		</view>
		<view class="row-two">
		<view class="form-item">
			<label>手机号:</label>
			<input v-model="formData.mobile" type="number" />
		</view>
		
		<view class="form-item">
			<label>金额:</label>
			<input v-model="formData.amount" type="number" />
		</view>
		</view>
		<view class="form-item">
			<label>地址:</label>
			<input v-model="formData.customerAddress" type="number" />
		</view>
		<view class="form-item">
			<label>详细说明:</label>
			<view class="uni-textarea">
				<textarea v-model="formData.details" maxlength=-1 auto-height />
			</view>
		</view>
		<view class="row-two">
			<view class="form-item">
				<label>账单类型:</label>
				<picker mode="selector" :range="billTypes" :value="selectedTypeIndex" @change="bindTypeChange">
					<view class="picker">
						{{billTypes[this.selectedTypeIndex]}}
					</view>
				</picker>
			</view>
			<view class="form-item">
				<label>付款类型:</label>
				<picker mode="selector" :value="selectedDeptIndex" :range="debtTypes" @change="bindDebtChange">
					<view class="picker">
						{{debtTypes[this.selectedDeptIndex]}}
					</view>
				</picker>
			</view>
		</view>

		<view class="form-item">
			<label>图片:</label>
			<uni-file-picker class="file-picker" v-model="billUrls" @select="uploadFile" @delete="delFile" ref="files"
				:auto-upload="false" limit=1 fileMediatype="image" :image-styles="imageStyles" />
		</view>

		<view class="actions">
			<view @click="addOrUpdate()" class="button-box">确定</view>
			<view @click="contactCustomer()" class="button-box">联系客户</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					amount: "",
					billId: "",
					billUrl: "",
					cost: "",
					customerAddress: "",
					customerId: "",
					customerName: "",
					details: "",
					isDebt: "",
					mobile: "",
					timePeriod: "",
					type: "",
					eventTime: this.getDate()
				},
				id: '',
				billTypes: ['饲料', '打针', '兽药', '综合'],
				debtTypes: ['还清', '欠账'],
				billUrls: [],
				selectedTypeIndex: 0,
				selectedDeptIndex: 0,
				imageStyles: {
					width: 400,
					height: 300,
					border: {
						color: "#ff5a5f",
						width: 2,
						style: 'dashed',
						radius: '3px'
					}
				}
			}
		},
		onLoad(option) {
			if (option.id) {
				this.id = option.id
				this.fetchBillById(this.id)
			}
		},
		methods: {
			bindTypeChange(e) {
				this.selectedTypeIndex = e.detail.value;
				this.formData.type = this.billTypes[this.selectedTypeIndex];
			},
			bindDebtChange(e) {
				this.selectedDeptIndex = e.detail.value;
				this.formData.isDebt = this.debtTypes[this.selectedDeptIndex];
			},
			bindDateChange(e) {
				this.formData.eventTime = e.detail.value
			},
			fetchBillById(id) {
				uni.request({
					url: `http://106.14.247.216:8888/drugStore/bill/getBillById?id=${this.id}`,
					method: 'GET',
					success: (res) => {
						console.log(res)
						if (res.data.code === 1000 && res.data.data) {
							this.formData = res.data.data; // 假设res.data直接就是账单数组
							this.selectedDeptIndex = this.debtTypes.findIndex(item => item == res.data.data
								.isDebt);
							this.selectedTypeIndex = this.billTypes.findIndex(item => item == res.data.data
								.type);
							if (res.data.data.billUrl) {
								this.billUrls = [{
									url: res.data.data.billUrl,
									extname: 'jpg',
									name: '照片'
								}]
							}
						} else {
							console.error('获取账单失败:', res);
						}
					},
					fail: (err) => {
						console.error('请求失败:', err);
					}
				});
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			addOrUpdate() {
				this.formData.type = this.billTypes[this.selectedTypeIndex];
				this.formData.isDebt = this.debtTypes[this.selectedDeptIndex];
				// 添加其他参数到 formData 中
				uni.request({
					url: 'http://106.14.247.216:8888/drugStore/bill/addOrUpdate',
					method: 'POST',
					data: this.formData,
					success: (res) => {
						console.log('操作成功，准备显示提示框');
						if (res.data.code === 1000) {
							uni.navigateBack({
								delta: 1,
								success() {
									uni.$emit('update', {
										msg: '页面更新'
									})
								},

							});
						} else {
							console.error('获取账单列表失败:', res);
						}
					},
					fail: (err) => {
						console.error('请求失败:', err);
					}
				});
			},
			uploadFile(e) {
				const tempFilePaths = e.tempFilePaths; //e是获取的图片源
				uni.uploadFile({
					url: 'http://106.14.247.216:8888/drugStore/file/upload', //上传图片的后端接口
					filePath: tempFilePaths[0],
					name: 'file',
					success: (res) => {
						res = JSON.parse(res.data)
						console.log(res);
						if (res.code === 1000 && res.data) {
							this.formData.billUrl = res.data
							console.log(this.formData.billUrl)
							this.billUrls = [{
								url: res.data,
								extname: 'jpg',
								name: '图片'
							}]
						} else {
							console.error('文件上传失败:', res);
						}
					},
					fail: (err) => {
						console.error('请求失败:', err);
					}
				});
			},
			delFile(e) {
				uni.request({
					url: `http://106.14.247.216:8888/drugStore/file/delete?url=${e.tempFilePath}`,
					method: 'GET',
					success: (res) => {
						if (res.data.code === 1000) {
							this.formData.billUrl = ''
						} else {
							console.error('删除失败:', res);
						}
					},
					fail: (err) => {
						console.error('请求失败:', err);
					}
				});
			},
			searchCutomer() {
				console.log(this.formData.customerName)
				uni.request({
					url: `http://106.14.247.216:8888/drugStore/customer/getCustomerByName?name=${this.formData.customerName}`,
					method: 'GET',
					success: (res) => {
						if (res.data.code === 1000 && res.data.data) {
							this.formData.mobile = res.data.data.mobile;
							this.formData.customerId = res.data.data.customerId;
							this.formData.customerAddress = res.data.data.customerAddress;
						}
					},
					fail: (err) => {
						console.error('请求失败:', err);
					}
				});
			},
			contactCustomer() {
				uni.makePhoneCall({
					phoneNumber: this.formData.mobile
				})
			}
		}
	}
</script>

<style>
	.modal-content {
		padding-left: 20px;
		padding-top: 20px;
		padding-right: 20px;
		background-color: RGB(248, 248, 248);
	}

	.row-two {
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		margin-bottom: 30px;
		display: flex;
		flex-direction: column;
	}

	label {
		font-weight: bold;
		margin-bottom: 5px;
		margin-left: 1px;
	}

	input {
		padding: 2px;
		border: 1px solid #ccc;
		border-radius: 10px;
		font-size: 20px;
		height: 30%;
		width: 80%;
	}

	textarea {
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: 14px;
		width: 100%;
		height: 30%;
		box-sizing: border-box;
		padding: 8px;
	}

	.uni-input {
		padding: 8px;
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: 14px;
		width: 100%;
		height: 30%;
		box-sizing: border-box;
	}

	.picker {
		padding: 8px;
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: 14px;
		width: 100%;
		height: 30%;
		box-sizing: border-box;
	}

	.actions {
		display: flex;
		/* justify-content: flex-end; */
		justify-content: space-evenly;
	}

	.button-box {
		font-size: 18px;
		color: white;
		border-radius: 4px;
		background-color: #5cb85c;
		padding: 5px 9px;
		/* padding: 5px 8px; */
	}

	.upload-file {
		display: flex;
		justify-content: space-between;
		padding: 40px;
	}

	.button-file {}
</style>